<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 200px;
            height: 400px;

            background-color: aquamarine;
            margin: 0 auto;
            padding-left: 10px;
        }

        input {
            outline: none;
        }
    </style>
    <script src="./layui/layui.js"></script>
</head>

<body>
    <form class="layui-form" action="">
        <h2>注册页面</h2>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button">立即注册</button>
            </div>
        </div>
    </form>
</body>
<script>
    document.querySelector("button").onclick = function () {
        //第一步、 获取元素
        let mobile = document.querySelector('input[name="title"]').value;
        let password = document.querySelector('input[name="password"]').value;
        let xhr = new XMLHttpRequest;
        xhr.open("post", 'http://phpclub.org.cn/edu/server/regist.php');//第二步、完成连接的建立
        // 设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置请求头 特定的写法
        //第三步、调用send方法完成发送请求 send方法中可以传递参数 参数表示是请求体中携带的数据
        xhr.send(`mobile=${mobile}&password=${password}`);
       
        xhr.onload = () => {
            let response = JSON.parse(xhr.responseText);//把jsonstr这个json格式的字符串转换成了JSON对象
            // 服务端返回的是JSON格式必定存在code msg data信息
            if (response.code != 100){
                // layer.msg属于layui框架内置所封装的功能
                layer.msg(response.msg, {
                    icon: 2
                });
            } else {
                location.href = "login.html"
            }
        }
    }
</script>

</html>